<!-- 上传组件 -->
<template>
  <div class="upload-main">
    <Upload
      :type="uploadType"
      :accept="acceptType"
      :action="baseUrl"
      :multiple="false"
      :on-progress="handlerProgress"
      :on-success="handleSuccess"
      :on-error="handleError"
      :show-upload-list="false"
      :disabled="isUploadDisabled"
    >
      <div class="demo-spin-col">
        <div class="update-photo" v-if="!isUploadDisabled">
          将证件照拖拽至此区域，或点击上传图片
        </div>
        <Spin v-else></Spin>
      </div>
    </Upload>
  </div>
</template>

<script type="text/javascript">
const Setting = require("@/setting").default;
export default {
  name: "btn-text",
  props: {},
  data() {
    return {
      baseUrl: "",
      acceptType:'.jpg,.jpeg,.png',
      uploadType:'drag',
      isUploadDisabled: false,
    };
  },
  methods: {
    handlerProgress() {
      this.isUploadDisabled = true;
    },
    handleSuccess(res, file) {
      console.log(res.response, file.response.data, "res, file");
      this.$emit("uploadSuccess", file.response.data);
      this.isUploadDisabled = false;
    },
    handleError() {
      this.$message.error("文件上传失败");
      this.isUploadDisabled = false;
    },
  },
  mounted() {
    this.baseUrl = Setting.apiBaseURL + "/global/base/app/singleFileUpload";
  },
};
</script>

<style lang="less" scoped>
.upload-main{
  position: relative;
}
.update-photo {
  text-align: center;
  background: #eee;
  border-radius: 2px;
  flex: none;
  height: 80px;
  line-height: 80px;
  width: 100%;
  position: absolute;
  left:0;
  right:0;
  bottom:0;
  top:0;
}
.demo-spin-col {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}
</style>
